<template>
  <div class="toolbar-container">
    <div class="left-toolbar">
      <el-button
        type="text"
        :disabled="undoDisabled"
        :title="'撤销'"
        @click="undoHistory"
      >
        <svg-icon icon-class="revoke"
      /></el-button>
      <el-button
        type="text"
        :disabled="redoDisabled"
        :title="'重做'"
        @click="redoHistory"
      >
        <svg-icon icon-class="redo"
      /></el-button>
    </div>
    <div class="right-toolbar">
      <div class="right-toolbar-con">
        <el-button type="text" icon="el-icon-delete"> 清空</el-button>

        <el-button type="text"> <svg-icon icon-class="view" />预览</el-button>

        <el-button
          type="text"
          icon="el-icon-download"
          @click="onClick('download')"
        >
          下载json文件</el-button
        >
        <el-button
          type="text"
          icon="el-icon-document-add"
          @click="onClick('open')"
        >
          打开json文件</el-button
        >
        <el-button
          type="text"
          icon="el-icon-plus"
          @click="onClick('quickCreate')"
        >
          快速创建</el-button
        >
      </div>
    </div>
    <input
      type="file"
      ref="fileElem"
      id="fileElem"
      multiple
      accept="*.json"
      style="display: none"
      @change="handleFiles"
    />
    <el-dialog
      title="快速创建"
      :visible="visible"
      width="600px"
      @close="visible = false"
    >
      <div class="dialog-content">
        <el-button
          class="btn"
          v-for="(region, index) in regions"
          :key="index"
          type="info"
          round
          @click="generateMap(region)"
          >{{ region.name }}</el-button
        >
        <div id="containermap"></div>
      </div>
    </el-dialog>
  </div>
</template>

<script >
import { handleLineNet } from "@/utils/baiduRailway";
import { mapMutations, mapState } from "vuex";
import { saveAs } from "file-saver";
export default {
  computed: {
    ...mapState(["linesOptions"]),
  },
  data() {
    return {
      undoDisabled: false,
      redoDisabled: true,
      visible: false,
      regions: [],
      fileReader: null,
    };
  },
  mounted() {
    let self = this;
    this.fileReader = new FileReader();
    this.fileReader.onload = function loadedHandler(params) {
      // self.click1({ title: "New File" });
      let strData = params.target.result;
      let jsonObj = JSON.parse(strData);
      if (window.$graph) {
        if (jsonObj.graph) {
          window.$graph.fromJSON(jsonObj.graph);
          self.setData({
            linesOptions: jsonObj.linesOptions,
          });
        } else {
          window.$graph.fromJSON(jsonObj);
        }
      }
      // 还需要将线路信息取出来
    };
  },
  methods: {
    ...mapMutations(["setData"]),
    undoHistory() {},
    redoHistory() {},
    handleFiles(params) {
      let file = params.target.files[0];
      file ? this.fileReader.readAsText(file) : null;
    },
    downloadFile() {
      let jsonData = {};
      let stationObj = {};
      if (window.$graph) {
        let allNodes = window.$graph.getNodes();
        let stationNodes = allNodes.filter((node) => !node.id.includes("text"));
        for (let i = 0; i < stationNodes.length; i++) {
          let node = stationNodes[i];
          stationObj[node.getData().sn] = node.id;
        }
      }
      window.$graph ? (jsonData.graph = window.$graph.toJSON()) : null;
      jsonData.linesOptions = this.linesOptions;
      jsonData.stations = stationObj;
      // jsonData.lineRoutes = this.lineRoutes;
      // jsonData.linenetObj = this.linenetObj;
      // jsonData.linenetId = this.linenetId;
      // jsonData.minX = this.minX;
      // jsonData.minY = this.minY;
      // jsonData.maxX = this.maxX;
      // jsonData.maxY = this.maxY;
      let blob = new Blob([JSON.stringify(jsonData)], {
        type: "application/json",
      });
      saveAs(blob, "default.json");
    },
    dealJSON(bd) {
      let lineOptions = handleLineNet(bd);
      this.setData({
        linesOptions: lineOptions,
      });
    },
    generateMap(region) {
      let self = this;
      window.subway = new BMapSub.Subway("containermap", region.citycode);
      window.subway.addEventListener("subwayloaded", function () {
        let lineNet = window.subway.getLines();

        self.dealJSON(lineNet);
      });
    },
    openBaiduList() {
      this.regions = BMapSub.SubwayCitiesList;
      this.visible = true;
    },
    onClick(type) {
      console.log(type);
      switch (type) {
        case "quickCreate":
          this.openBaiduList();
          break;
        case "open":
          this.$refs.fileElem.click();
          break;
        case "download":
          this.downloadFile();
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.toolbar-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  :deep(.el-button.is-disabled) {
    background-color: transparent;
  }
  .dialog-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .btn {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }
  #containermap {
    width: 1px;
    height: 1px;
  }
}
</style>
